<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<body>

<nav class="navbar navbar-expand-lg navbar-light sticky-top" th:fragment="navbar" data-turbo-permanent>
    <style>
        :root { --navbar-height: 64px; --nav-link-color: #334155; --nav-link-hover: #2563eb; --nav-link-active: #2563eb; --nav-underline-h: 2px; }
        .navbar {
            background: rgba(255,255,255,0.75);
            -webkit-backdrop-filter: saturate(180%) blur(10px);
            backdrop-filter: saturate(180%) blur(10px);
            border-bottom: 1px solid rgba(226,232,240,0.8);
            box-shadow: 0 1px 10px rgba(17,24,39,0.06);
            z-index: 1045;
            min-height: var(--navbar-height);
            width: 100%;
            font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
        }
        .navbar-brand {
            color: #2563eb;
            font-weight: 600;
            font-size: 1.2rem;
            letter-spacing: 0.2px;
        }
        .navbar-toggler {
            border-color: rgba(0,0,0,0.12);
        }
        .navbar .nav-link {
            position: relative;
            padding: 0.6rem 0.8rem !important;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: color 0.2s ease-in-out;
            justify-content: center;
            color: var(--nav-link-color) !important;
            line-height: 1;
            flex-shrink: 0;
            font-weight: 500;
        }
        .navbar .nav-link:focus { outline: none; }
        .navbar .nav-link span { white-space: nowrap; }
        .navbar .nav-link:hover,
        .navbar .nav-link.active,
        .navbar .nav-link:active { color: var(--nav-link-active) !important; }
        .navbar .nav-link::after {
            content: '';
            position: absolute; bottom: 0; left: 0; width: 0; height: var(--nav-underline-h);
            background-color: var(--nav-link-active); border-radius: 3px 3px 0 0;
            transition: width 0.2s ease-in-out;
        }
        .navbar .nav-link:hover::after,
        .navbar .nav-link.active::after { width: 100%; }

        .dropdown-menu { background-color: #ffffff; border: 1px solid rgba(0,0,0,0.06); }
        .dropdown-item { color: #334155; transition: all 0.2s ease; }
        .dropdown-item:hover { background-color: rgba(37, 99, 235, 0.08); color: #1e293b; }

        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
        html.turbo-visit-to { animation: fade-in 0.4s ease-in-out; }
        html.turbo-visit-from { animation: fade-out 0.4s ease-in-out; }

        .navbar-collapse { position: relative; }
        .navbar-nav-right {}
        @media (min-width: 992px) {
            .navbar-nav-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
        }

        @media (max-width: 991.98px) {
            .navbar-collapse {
                transform-origin: top;
                will-change: transform, opacity;
                transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
                            opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
            }
            .navbar-collapse.collapse:not(.show) { display: block; height: 0 !important; transform: translateY(-8px); opacity: 0; overflow: hidden; }
            .navbar-collapse.collapsing { transform: translateY(-4px); opacity: 0.5; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms cubic-bezier(0.22, 1, 0.36, 1); }
            .navbar-collapse.show { transform: translateY(0); opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .navbar-collapse,
            .navbar-collapse.collapsing,
            .navbar-collapse.show,
            .navbar .nav-link::after { transition: none !important; animation: none !important; }
        }

        .navbar .container { min-height: var(--navbar-height); display: flex; align-items: center; max-width: 1200px; }
    </style>

    <div class="container">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="mainNavbar">
            <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/}" th:classappend="${#strings.equals(requestURI, '/')} ? 'active' : ''">
                        <i class="bi bi-house"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li class="nav-item" th:each="category : ${categories}" th:if="${category != null}">
                    <a class="nav-link" th:href="@{/category/{id}(id=${category.id})}" th:classappend="${#strings.startsWith(requestURI, '/category/' + category.id)} ? 'active' : ''">
                        <i class="bi" th:classappend="${category.icon != null ? 'bi-' + category.icon : 'bi-tag'}"></i>
                        <span th:text="${category.name}"></span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/treasure}" th:classappend="${#strings.equals(requestURI, '/treasure')} ? 'active' : ''">
                        <i class="bi bi-box"></i>
                        <span>百宝箱</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/about}" th:classappend="${#strings.equals(requestURI, '/about')} ? 'active' : ''">
                        <i class="bi bi-person"></i>
                        <span>关于我</span>
                    </a>
                </li>
            </ul>

            <ul class="navbar-nav navbar-nav-right">
                <li class="nav-item dropdown" sec:authorize="hasRole('ADMIN')">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" th:classappend="${#strings.startsWith(requestURI, '/admin')} ? 'active' : ''">
                        <i class="bi bi-gear"></i>
                        <span>管理</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" th:href="@{/posts/new}" title="快速创建新文章" data-bs-toggle="tooltip" data-bs-placement="left"><i class="bi bi-file-earmark-plus"></i> 写文章</a></li>
                        <li><a class="dropdown-item" th:href="@{/admin/categories}" title="管理与排序分类" data-bs-toggle="tooltip" data-bs-placement="left"><i class="bi bi-tags"></i> 分类管理</a></li>
                        <li><a class="dropdown-item" th:href="@{/admin/treasure}" title="维护百宝箱资源" data-bs-toggle="tooltip" data-bs-placement="left"><i class="bi bi-box"></i> 百宝箱管理</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" th:href="@{/admin}" title="查看总体概况与统计" data-bs-toggle="tooltip" data-bs-placement="left"><i class="bi bi-speedometer2"></i> 仪表盘</a></li>
                        <li><a class="dropdown-item" th:href="@{/admin/settings}" title="站点通用设置" data-bs-toggle="tooltip" data-bs-placement="left"><i class="bi bi-sliders"></i> 网站设置</a></li>
                        <li><a class="dropdown-item" th:href="@{/admin/about}" title="编辑个人简介页" data-bs-toggle="tooltip" data-bs-placement="left"><i class="bi bi-person-square"></i> 关于我设置</a></li>
                    </ul>
                </li>
                <li class="nav-item" sec:authorize="isAuthenticated()">
                    <a class="nav-link" th:href="@{/logout}">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>退出 (<span sec:authentication="name"></span>)</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<script defer src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/dist/turbo.es2017-umd.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script>
<script defer src="/js/turbo-fixes.js"></script>

<script>
// 初始化工具提示（不再给 body 添加 nav-scoped-scroll）
(function() {
  document.addEventListener('DOMContentLoaded', function() {
    // document.body.classList.add('nav-scoped-scroll'); // 已移除
    if (window.bootstrap) {
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
      tooltipTriggerList.forEach(function(el){ new bootstrap.Tooltip(el); });
    }
  });
})();

// 确保Bootstrap已加载后再初始化TurboFixes
if (typeof bootstrap !== 'undefined') {
    if (window.TurboFixes) { window.TurboFixes.init(); }
} else {
    document.addEventListener('DOMContentLoaded', function() {
        const checkBootstrap = () => {
            if (typeof bootstrap !== 'undefined' && window.TurboFixes) { window.TurboFixes.init(); }
            else { setTimeout(checkBootstrap, 100); }
        };
        checkBootstrap();
    });
}
</script>

</body>
</html>